<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		blockquote,body,button,dd,dl,dt,fieldset,h1,h2,h3,h4,h5,h6,hr,input,li,ol,p,pre,td,textarea,th,ul{margin: 0;padding: 0}
		body,button,input,select,textarea{font: 14px/1.5 Microsoft Yahei,Tahoma,Verdana,Arial,sans-serif;color: #333}
		address,cite,dfn,em,i,var{font-style: normal}
		h1,h2,h3,h4,h5,h6{font-weight: 400}
		small{font-size: 12px}
		ol,ul{list-style: none}
		a{text-decoration: none;outline: 0 none;color: #333}
		img{border: 0;vertical-align: top;max-width: 100%}
		button,input,select,textarea{font-size: 100%}
		button,input[type=checkbox]{border: 0;outline: none;cursor: pointer;-webkit-appearance: none}
		input:-ms-input-placeholder,input:-webkit-input-placeholder{color: #aaa}
		input:focus:-webkit-input-placeholder{color: transparent}
		table{border-collapse: collapse;border-spacing: 0}
		.clearfix:after{content: "";display: block;height: 0;visibility: hidden;clear: both}
		.clearfix{zoom:1}
		html{width: 100%;min-height: 540px;}
		*{box-sizing: border-box;}
		body{
			background-color: #f7f7f7;
		}

		.wrap{
			width: 1100px;
			margin: 0 auto;
		}
		.pull-left{
			float: left;
		}
		.pull-right{
			float: right;
		}

		header{
		    height: 46px;
		    line-height: 46px;
		}
		header .line46{
		    height: 46px;
		    color: #FFF;
		    background: #333;
		    overflow: hidden;
		    position: fixed;
		    top: 0;
		    left: 0;
		    right: 0;
		    z-index: 100;
		}
		header .logo{
			float: left;
			font-size: 22px;
		}
		header .menuList{
			float: right;
		}
		header .menuList li{
			float: left;
		    display: block;
		    padding: 0 0 0 40px;
		    font-size: 16px;
		}
		.pics{
			margin: 20px 0 0;
			width: 100%;
		}
		.pics ul{}
		.pics ul li{
			width: 32.3%;
			height: 155px;
		    float: left;
		    display: block;
		    overflow: hidden;
		    border-radius: 5px;
		    position: relative;
		    background-color: #fff;
		}
		.pics ul li + li{
			margin: 0 0 0 17px;
		}
		.conter-wrap{
			margin: 20px 0 0;
			width: 100%;
		}

		.leftbox{
			width: 70%;
		    float: left;
		    overflow: hidden;
		}
		.leftbox p{
			height: 150px;
		    background-color: #fff;
		    margin-bottom: 10px;
		}
		.rightbox{
			width: 28%;
			height: 1500px;
		    float: right;
		    overflow: hidden;
		}
		.rightbox div{
			height: 150px;
		    background-color: #efefef;
		    margin-bottom: 10px;
		}

		footer{
		    width: 100%;
		    background: #333;
		    color: #a5a4a4;
		    text-align: center;
		    padding: 20px 0;
		    text-align: center;
		}
	</style>
</head>
<body>
	<div id="app">
		<header>
			<div class="line46">
				<div class="wrap clearfix">
					<div class="logo">LOGO</div>
					<ul class="menuList">
						<li>菜单1</li>
						<li>菜单1</li>
						<li>菜单1</li>
					</ul>
				</div>
			</div>
		</header>
		<div id="main">
			<div class="wrap">
				<div class="pics">
					<ul class="clearfix">
						<li><a href="">图片1</a></li>
						<li><a href="">图片1</a></li>
						<li><a href="">图片1</a></li>
					</ul>
				</div>

				<div class="conter-wrap clearfix">
					<div class="pull-left leftbox">
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
						<p>左边内容</p>
					</div>
					<div class="pull-right rightbox">
						<div></div>
						<div></div>
						<div></div>
					</div>
				</div>
			</div>

		</div>
		<footer>
			<div class="wrap">
				<span>footer</span>
			</div>
		</footer>
	</div>
</body>
</html>